<template>
	<div class="meal_content">
		<x-header title="套餐内容" class="blues" :left-options="{backText: ''}">
			<a slot="right" style="font-size:.3rem;color:#fff;" @click="goHelp">帮助中心</a>
		</x-header>
		<div class="content">
			<div class="account_tab">
				<tab>
					<tab-item :selected="selectIndex===0" @on-item-click="onItemClick">已选菜品</tab-item>
					<tab-item :selected="selectIndex===1" @on-item-click="onItemClick">我的菜品库</tab-item>
				</tab>
			</div>
			<div class="content1" v-if="selectIndex===0">
				<div class="no_data" v-if="noData">
					<img src="../../assets/images/groups/select_meal.jpg" alt="" />
					<img src="../../assets/images/groups/no_meal.jpg" alt="" />
				</div>
				<div class="have_datas" v-if="!noData">
					<div class="single_meal">
						<p>单人餐</p>
						<div @click="userable">
							<img src="../../assets/images/groups/helps.jpg" alt="" />
							<span v-if="selIndex===0">全部可用</span>
							<span v-if="selIndex===1">3选1可用</span>
							<span v-if="selIndex===2">3选2可用</span>
							<img src="../../assets/images/statistics/right_arrow2.jpg" alt="" />
						</div>
					</div>
					<div class="data_lists">
						<div class="data_list">
							<p>客家三及第汤</p>
							<p>￥{{ price1 }}</p>
							<div>
								<group>
									<x-number fillable title="" v-model="value1" button-style="round" :min="0"></x-number>
								</group>
							</div>
						</div>
						<div class="data_list">
							<p>咸鱼茄子</p>
							<p>￥{{ price2 }}</p>
							<div>
								<group>
									<x-number fillable title="" v-model="value2" button-style="round" :min="0"></x-number>
								</group>
							</div>
						</div>
						<div class="data_list">
							<p>咸鱼茄子饭</p>
							<p>￥{{ price3 }}</p>
							<div>
								<group>
									<x-number fillable title="" v-model="value3" button-style="round" :min="0"></x-number>
								</group>
							</div>
						</div>
					</div>
					<div class="footers1">
						<p>已选菜品<span>3</span>种，店内原价<span>￥{{ totalP }}</span></p>
						<button @click="goRelease">确定套餐</button>
					</div>
					<popup v-model="show2" @on-hide="log('hide')" @on-show="log('show')">
						<div class="all_use">
							<p @click="select(0)" :class="{selects:selIndex===0}">全部可用</p>
							<p @click="select(1)" :class="{selects:selIndex===1}">3选1可用</p>
							<p @click="select(2)" :class="{selects:selIndex===2}">3选2可用</p>
						</div>
					</popup>
				</div>
			</div>
			<!-- 我的菜品库 -->
			<div class="content2" v-if="selectIndex===1">
				<div class="all_foods">
					<div class="first_class">
						<p v-for="(i,index) in 4" @click="sel_one(index)" :class="{sels:index===selIndex1}">
							<span>单人餐</span>
							<badge v-if="selNum1>0" :text="selNum1" style="position:absolute;right:.06rem;top:.12rem;"></badge>
						</p>
					</div>
					<div class="second_class">
						<div class="second_lists" v-for="(i,index) in 3">
							<div class="food_img">
								<img src="../../assets/images/banner/banner.jpg" alt="" />
							</div>
							<div class="food_info">
								<h6>客家三及第汤</h6>
								<p><span>￥12</span>/份</p>
							</div>
							<div>
								<group>
									<x-number fillable title="" width=".4rem" v-model="value4" button-style="round" :min="0"></x-number>
								</group>
							</div>
						</div>
					</div>
				</div>
				<div class="footers2">
					<p>已选菜品<span>3</span>种，店内原价<span>￥46</span></p>
					<div>
						<button>新增菜品</button>						
						<button @click="showSelect">查看已选菜品</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem, Group, XNumber, Actionsheet, Popup, Badge } from 'vux';
	export default {
		name: 'meal_content',
		data() {
			return {
				selectIndex: 0, //0-已选菜品  1-我的菜品库
				noData: false,
				value1: 1,
				value2: 1,
				value3: 1,
				show2: false,
				selIndex: 0,
				selIndex1: 0, //一级分类
				selIndex2: 0, //二级分类
				selNum1: 0,
				value4: 0,
				nums: 0,				
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
			Group,
			XNumber,
			Actionsheet,
			Popup,
			Badge
		},
		computed: {
			price1() {
				if(!this.value1) {
					return 0;
				}
				return this.value1 * 12;
			},
			price2() {
				if(!this.value2) {
					return 0;
				}
				return this.value2 * 17;
			},
			price3() {
				if(!this.value3) {
					return 0;
				}
				return this.value3 * 17;
			},
			totalP() {
				return this.price1 + this.price2 + this.price3;
			}
		},
		created() {

		},
		methods: {
			//帮助中心
			goHelp() {
				this.$router.push('/customerService');
			},
			//切换
			onItemClick(val) {
				this.selectIndex = val;
			},
			change1() {

			},
			userable() {
				this.show2 = true;
			},
			log(str) {
				console.log(str)
			},
			select(val) {
				this.selIndex = +val;
				setTimeout(() => {
					this.show2 = false;
				}, 200);
			},
			//选择一级分类
			sel_one(id) {
				this.selIndex1 = id;
			},
			showSelect(){
				this.selectIndex = 0;
			},
			//确认套餐
			goRelease(){
				let obj = {};
				obj.totalNumber = 3;
				obj.totalPrice = this.totalP;
				localStorage.setItem('meal_info',JSON.stringify(obj));				
				this.$router.push('/release');				
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.meal_content {
		.content {
			.content1 {
				.no_data {
					img:nth-of-type(1) {
						width: 7.5rem;
						height: 1.2rem;
					}
					img:nth-of-type(2) {
						width: 1.43rem;
						height: 2.09rem;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
				.have_datas {
					background: #fff;
					display: flex;
					flex-direction: column;
					.single_meal {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: .24rem .28rem;
						border-top: .22rem solid #f0f0f0;
						border-bottom: 1px solid #e0e0e0;
						>p {
							font-size: .3rem;
							color: #333;
						}
						>div {
							display: flex;
							align-items: center;
							img:nth-of-type(1) {
								width: .31rem;
								height: .32rem;
							}
							span {
								font-size: .28rem;
								color: #04b5a1;
								margin: 0 .1rem;
							}
							img:nth-of-type(2) {
								width: .16rem;
								height: .16rem;
							}
						}
					}
					.data_lists {
						.data_list {
							margin-left: .26rem;
							height: .88rem;
							display: flex;
							justify-content: space-between;
							align-items: center;
							border-bottom: 1px solid #e0e0e0;
							overflow: hidden;
							p:nth-of-type(1) {
								width: 2.5rem;
								text-align: left;
								font-size: .3rem;
								color: #464646;
							}
							p:nth-of-type(2) {
								font-size: .26rem;
								color: #f54100;
							}
						}
					}
					.footers1 {
						width: 7.5rem;
						height: 1.7rem;
						position: fixed;
						bottom: 0;
						left: 0;
						background: #fff;
						border-top: 1px solid #dadada;
						p {
							width: 6.9rem;
							margin: .22rem auto;
							text-align: left;
							font-size: .26rem;
							color: #1c1c1c;
							span {
								color: #f64700;
							}
						}
						button {
							width: 6.9rem;
							height: .76rem;
							line-height: .76rem;
							margin: 0 auto;
							border: none;
							border-radius: .05rem;
							background: #ff9d3c;
							font-size: .34rem;
							color: #fff;
						}
					}
					.all_use {
						height: 2.52rem;
						text-align: left;
						background: #fff;
						p {
							height: .84rem;
							line-height: .84rem;
							font-size: .3rem;
							color: #2c2c2c;
							padding: 0 .26rem;
							border-bottom: 1px solid #e3e3e3;
						}
						.selects {
							color: #05b5a1;
							background: url('../../assets/images/groups/sel_store.jpg') no-repeat 7rem .31rem;
							background-size: .28rem .22rem;
						}
					}
				}
			}
			.content2 {
				.all_foods {
					display: flex;
					.first_class {
						width: 1.6rem;
						background: #f7f7f7;
						p {
							height: 1rem;
							line-height: 1rem;
							font-size: .28rem;
							color: #444;
							position: relative;
						}
						.sels {
							background: #fff;
							color: #11b9a5;
						}
					}
					.second_class {
						align-self: flex-start;
						width: 5.9rem;						
						background: #fff;
						.second_lists {
							display: flex;
							justify-content: space-between;
							align-items: center;
							height: 1.44rem;
							margin-left: .28rem;
							border-bottom: 1px solid #e5e5e5;							
							overflow: hidden;
							text-align: left;
							.food_img {
								img {
									width: .98rem;
									height: .98rem;
								}
							}
							.food_info {
								height: .98rem;
								h6{
									font-size: .3rem;
									color: #161616;
									font-weight: 400;
								}
								p{
									font-size: .26rem;
									color: #747474;
									margin-top: .2rem;
									span{
										font-size: .24rem;
										color: #f7530c;
									}
								}
							}							
						}
					}
				}
				.footers2{
					width: 7.5rem;
					height: 1.7rem;
					background: #fff;
					position: fixed;
					bottom: 0;
					left: 0;
					border-top: 1px solid #dbdbdb;
					text-align: left;
					p{
						width: 7rem;
						margin: .22rem auto;
						font-size: .28rem;
						color: #050505;
						span{
							color: #f64500;
						}
					}
					>div{
						width: 7rem;
						margin: 0 auto;
						display: flex;
						justify-content: space-between;
						align-items: center;
						button{
							border: none;
							width: 3.3rem;
							height: .76rem;
							line-height: .76rem;
							border-radius: .05rem;
							font-size: .32rem;
						}
						button:nth-of-type(1){
							background: #f0f0f0;
							color: #262626;
							font-weight: 700;
						}
						button:nth-of-type(2){
							background: #3dc6b6;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>